<!DOCTYPE html>
<html lang="en">
  <head>
    <title>GlidingCollection  Reference</title>
    <link rel="stylesheet" type="text/css" href="css/jazzy.css" />
    <link rel="stylesheet" type="text/css" href="css/highlight.css" />
    <meta charset='utf-8'>
    <script src="js/jquery.min.js" defer></script>
    <script src="js/jazzy.js" defer></script>
    
  </head>
  <body>
    <a title="GlidingCollection  Reference"></a>
    <header>
      <div class="content-wrapper">
        <p><a href="index.html">GlidingCollection Docs</a> (100% documented)</p>
      </div>
    </header>
    <div class="content-wrapper">
      <p id="breadcrumbs">
        <a href="index.html">GlidingCollection Reference</a>
        <img id="carat" src="img/carat.png" />
        GlidingCollection  Reference
      </p>
    </div>
    <div class="content-wrapper">
      <nav class="sidebar">
        <ul class="nav-groups">
          <li class="nav-group-name">
            <a href="Classes.html">Classes</a>
            <ul class="nav-group-tasks">
              <li class="nav-group-task">
                <a href="Classes/GlidingCollection.html">GlidingCollection</a>
              </li>
            </ul>
          </li>
          <li class="nav-group-name">
            <a href="Global Variables.html">Global Variables</a>
            <ul class="nav-group-tasks">
              <li class="nav-group-task">
                <a href="Global Variables.html#/s:v17GlidingCollection33kGlidingCollectionParallaxViewTagSi">kGlidingCollectionParallaxViewTag</a>
              </li>
            </ul>
          </li>
          <li class="nav-group-name">
            <a href="Instance Methods.html">Instance Methods</a>
            <ul class="nav-group-tasks">
              <li class="nav-group-task">
                <a href="Instance Methods.html#/s:FC17GlidingCollection17GlidingCollection6expandFT2atSi8animatedSb_T_">expand(at:animated:)</a>
              </li>
              <li class="nav-group-task">
                <a href="Instance Methods.html#/s:FC17GlidingCollection17GlidingCollection10expandNextFT_T_">expandNext()</a>
              </li>
              <li class="nav-group-task">
                <a href="Instance Methods.html#/s:FC17GlidingCollection17GlidingCollection14expandPreviousFT_T_">expandPrevious()</a>
              </li>
              <li class="nav-group-task">
                <a href="Instance Methods.html#/s:FP17GlidingCollection25GlidingCollectionDelegate17glidingCollectionFTCS_17GlidingCollection15didExpandItemAtSi_T_">glidingCollection(_:didExpandItemAt:)</a>
              </li>
              <li class="nav-group-task">
                <a href="Instance Methods.html#/s:FP17GlidingCollection25GlidingCollectionDelegate17glidingCollectionFTCS_17GlidingCollection15didSelectItemAtSi_T_">glidingCollection(_:didSelectItemAt:)</a>
              </li>
              <li class="nav-group-task">
                <a href="Instance Methods.html#/s:FP17GlidingCollection27GlidingCollectionDatasource17glidingCollectionFTCS_17GlidingCollection11itemAtIndexSi_SS">glidingCollection(_:itemAtIndex:)</a>
              </li>
              <li class="nav-group-task">
                <a href="Instance Methods.html#/s:FP17GlidingCollection25GlidingCollectionDelegate17glidingCollectionFTCS_17GlidingCollection16willExpandItemAtSi_T_">glidingCollection(_:willExpandItemAt:)</a>
              </li>
              <li class="nav-group-task">
                <a href="Instance Methods.html#/s:FP17GlidingCollection27GlidingCollectionDatasource13numberOfItemsFT2inCS_17GlidingCollection_Si">numberOfItems(in:)</a>
              </li>
              <li class="nav-group-task">
                <a href="Instance Methods.html#/s:FC17GlidingCollection17GlidingCollection19scrollViewDidScrollFCSo12UIScrollViewT_">scrollViewDidScroll(_:)</a>
              </li>
            </ul>
          </li>
          <li class="nav-group-name">
            <a href="Instance Variables.html">Instance Variables</a>
            <ul class="nav-group-tasks">
              <li class="nav-group-task">
                <a href="Instance Variables.html#/s:vV17GlidingCollection13GlidingConfig17activeButtonColorCSo7UIColor">activeButtonColor</a>
              </li>
              <li class="nav-group-task">
                <a href="Instance Variables.html#/s:vV17GlidingCollection13GlidingConfig17animationDurationSd">animationDuration</a>
              </li>
              <li class="nav-group-task">
                <a href="Instance Variables.html#/s:vV17GlidingCollection13GlidingConfig11buttonsFontCSo6UIFont">buttonsFont</a>
              </li>
              <li class="nav-group-task">
                <a href="Instance Variables.html#/s:vV17GlidingCollection13GlidingConfig18buttonsScaleFactorV12CoreGraphics7CGFloat">buttonsScaleFactor</a>
              </li>
              <li class="nav-group-task">
                <a href="Instance Variables.html#/s:vV17GlidingCollection13GlidingConfig14buttonsSpacingV12CoreGraphics7CGFloat">buttonsSpacing</a>
              </li>
              <li class="nav-group-task">
                <a href="Instance Variables.html#/s:vV17GlidingCollection13GlidingConfig15cardShadowColorCSo7UIColor">cardShadowColor</a>
              </li>
              <li class="nav-group-task">
                <a href="Instance Variables.html#/s:vV17GlidingCollection13GlidingConfig16cardShadowOffsetVSC6CGSize">cardShadowOffset</a>
              </li>
              <li class="nav-group-task">
                <a href="Instance Variables.html#/s:vV17GlidingCollection13GlidingConfig17cardShadowOpacitySf">cardShadowOpacity</a>
              </li>
              <li class="nav-group-task">
                <a href="Instance Variables.html#/s:vV17GlidingCollection13GlidingConfig16cardShadowRadiusV12CoreGraphics7CGFloat">cardShadowRadius</a>
              </li>
              <li class="nav-group-task">
                <a href="Instance Variables.html#/s:vV17GlidingCollection13GlidingConfig9cardsSizeVSC6CGSize">cardsSize</a>
              </li>
              <li class="nav-group-task">
                <a href="Instance Variables.html#/s:vV17GlidingCollection13GlidingConfig12cardsSpacingV12CoreGraphics7CGFloat">cardsSpacing</a>
              </li>
              <li class="nav-group-task">
                <a href="Instance Variables.html#/s:vC17GlidingCollection17GlidingCollection14collectionViewCSo16UICollectionView">collectionView</a>
              </li>
              <li class="nav-group-task">
                <a href="Instance Variables.html#/s:vC17GlidingCollection17GlidingCollection10dataSourceGSqPS_27GlidingCollectionDatasource__">dataSource</a>
              </li>
              <li class="nav-group-task">
                <a href="Instance Variables.html#/s:vC17GlidingCollection17GlidingCollection8delegateGSqPS_25GlidingCollectionDelegate__">delegate</a>
              </li>
              <li class="nav-group-task">
                <a href="Instance Variables.html#/s:vC17GlidingCollection17GlidingCollection17expandedItemIndexSi">expandedItemIndex</a>
              </li>
              <li class="nav-group-task">
                <a href="Instance Variables.html#/s:vV17GlidingCollection13GlidingConfig20inactiveButtonsColorCSo7UIColor">inactiveButtonsColor</a>
              </li>
              <li class="nav-group-task">
                <a href="Instance Variables.html#/s:vV17GlidingCollection13GlidingConfig17isParallaxEnabledSb">isParallaxEnabled</a>
              </li>
              <li class="nav-group-task">
                <a href="Instance Variables.html#/s:vV17GlidingCollection13GlidingConfig10sideInsetsVSC12UIEdgeInsets">sideInsets</a>
              </li>
            </ul>
          </li>
          <li class="nav-group-name">
            <a href="Protocols.html">Protocols</a>
            <ul class="nav-group-tasks">
              <li class="nav-group-task">
                <a href="Protocols/GlidingCollectionDatasource.html">GlidingCollectionDatasource</a>
              </li>
              <li class="nav-group-task">
                <a href="Protocols/GlidingCollectionDelegate.html">GlidingCollectionDelegate</a>
              </li>
            </ul>
          </li>
          <li class="nav-group-name">
            <a href="Static Variables.html">Static Variables</a>
            <ul class="nav-group-tasks">
              <li class="nav-group-task">
                <a href="Static Variables.html#/s:ZvV17GlidingCollection13GlidingConfig6sharedS0_">shared</a>
              </li>
            </ul>
          </li>
          <li class="nav-group-name">
            <a href="Structs.html">Structs</a>
            <ul class="nav-group-tasks">
              <li class="nav-group-task">
                <a href="Structs/GlidingConfig.html">GlidingConfig</a>
              </li>
            </ul>
          </li>
        </ul>
      </nav>
      <article class="main-content">
        <section>
          <section class="section">
            
            <p><a href="https://business.ramotion.com?utm_source=gthb&amp;utm_medium=special&amp;utm_campaign=gliding-collection-logo"><img src="/assets/header.png" alt="header"></a></p>

<p><a href="http://twitter.com/Ramotion"><img src="https://img.shields.io/badge/Twitter-@Ramotion-blue.svg?style=flat" alt="Twitter"></a>
<a href="https://cocoapods.org/pods/GlidingCollection"><img src="https://img.shields.io/cocoapods/p/GlidingCollection.svg" alt="PodPlatform"></a>
<a href="http://cocoapods.org/pods/GlidingCollection"><img src="https://img.shields.io/cocoapods/v/GlidingCollection.svg" alt="PodVersion"></a>
<a href="https://cdn.rawgit.com/Ramotion/gliding-collection/master/docs/index.html"><img src="https://img.shields.io/cocoapods/metrics/doc-percent/GlidingCollection.svg" alt="Documentation"></a></p>

<p><a href="https://github.com/Ramotion/gliding-collection"><img src="https://img.shields.io/badge/Carthage-compatible-4BC51D.svg?style=flat" alt="Carthage"></a>
<a href="https://codebeat.co/projects/github-com-ramotion-gliding-collection"><img src="https://codebeat.co/badges/6a009992-5bf2-4730-aa35-f3b20ce7693d" alt="Codebeat"></a>
<img src="https://img.shields.io/badge/Swift-3.1-2ecc71.svg" alt="Swift"></p>

<p><br></p>
<a href='#about' class='anchor' aria-hidden=true><span class="header-anchor"></span></a><h2 id='about'>About</h2>

<p>This project is maintained by Ramotion, Inc.<br>
We specialize in the designing and coding of custom UI for Mobile Apps and Websites.<br><br><strong>Looking for developers for your project?</strong></p>

<p><a href="http://business.ramotion.com?utm_source=gthb&utm_medium=special&utm_campaign=gliding-collection-contact-us/#Get_in_Touch" > <img src="https://github.com/Ramotion/navigation-stack/raw/master/contact_our_team@2x.png" width="150" height="30"></a></p>

<p><a href="https://dribbble.com/shots/3333066-Gliding-Collection-App-Interface-UX-UI"><img src="/assets/preview.gif" alt="animation"></a></p>

<p>The <a href="https://store.ramotion.com?utm_source=gthb&amp;utm_medium=special&amp;utm_campaign=gliding-collection">iPhone mockup</a> available <a href="https://store.ramotion.com?utm_source=gthb&amp;utm_medium=special&amp;utm_campaign=gliding-collection">here</a>.
<br></p>
<a href='#requirements' class='anchor' aria-hidden=true><span class="header-anchor"></span></a><h2 id='requirements'>Requirements</h2>

<ul>
<li>iOS 8.0+</li>
<li>Xcode 8</li>
<li>Swift 3</li>
</ul>

<p><br></p>
<a href='#installation' class='anchor' aria-hidden=true><span class="header-anchor"></span></a><h2 id='installation'>Installation</h2>

<p>You can install <code>GlidingCollection</code> in several ways:</p>

<ul>
<li>Add source files to your project.</li>
</ul>

<p><br></p>

<ul>
<li>Use <a href="https://cocoapods.org">CocoaPods</a>:
<code>ruby
pod &#39;GlidingCollection&#39;
</code></li>
</ul>

<p><br></p>

<ul>
<li>Use <a href="https://github.com/Carthage/Carthage">Carthage</a>:
<code>
github &quot;Ramotion/gliding-collection&quot;
</code></li>
</ul>

<p><br></p>
<a href='#how-to-use' class='anchor' aria-hidden=true><span class="header-anchor"></span></a><h2 id='how-to-use'>How to use</h2>

<p>• Create some view controller class:</p>
<pre class="highlight swift"><code><span class="kd">import</span> <span class="kt">GlidingCollection</span>

<span class="kd">class</span> <span class="kt">ViewController</span><span class="p">:</span> <span class="kt">UIViewController</span> <span class="p">{</span>
  <span class="k">let</span> <span class="nv">items</span> <span class="o">=</span> <span class="p">[</span><span class="s">"shirts"</span><span class="p">,</span> <span class="s">"pants"</span><span class="p">,</span> <span class="s">"vests"</span><span class="p">]</span>
<span class="p">}</span>
</code></pre>

<p>• Drag <code>UIView</code> onto the canvas, change it&rsquo;s class to <code>GlidingCollection</code> and set autolayout constraints.</p>

<p><img src="/assets/step-2.png" alt="step-2"></p>

<p>• Connect this view to your view controller class as <code>@IBOutlet</code>.</p>
<pre class="highlight swift"><code><span class="kd">@IBOutlet</span> <span class="k">var</span> <span class="nv">glidingCollection</span><span class="p">:</span> <span class="kt">GlidingCollection</span><span class="o">!</span>
</code></pre>

<p>• Make your view controller conformant to <code>GlidingCollectionDatasource</code>. It&rsquo;s very similar to <code>UITableView</code> or <code>UICollectionView</code> <em>datasource</em> protocols that you know:</p>
<pre class="highlight swift"><code><span class="kd">extension</span> <span class="kt">ViewController</span><span class="p">:</span> <span class="kt">GlidingCollectionDatasource</span> <span class="p">{</span>

  <span class="kd">func</span> <span class="nf">numberOfItems</span><span class="p">(</span><span class="k">in</span> <span class="nv">collection</span><span class="p">:</span> <span class="kt">GlidingCollection</span><span class="p">)</span> <span class="o">-&gt;</span> <span class="kt">Int</span> <span class="p">{</span>
    <span class="k">return</span> <span class="n">items</span><span class="o">.</span><span class="n">count</span>
  <span class="p">}</span>

  <span class="kd">func</span> <span class="nf">glidingCollection</span><span class="p">(</span><span class="n">_</span> <span class="nv">collection</span><span class="p">:</span> <span class="kt">GlidingCollection</span><span class="p">,</span> <span class="n">itemAtIndex</span> <span class="nv">index</span><span class="p">:</span> <span class="kt">Int</span><span class="p">)</span> <span class="o">-&gt;</span> <span class="kt">String</span> <span class="p">{</span>
    <span class="k">return</span> <span class="s">"– "</span> <span class="o">+</span> <span class="n">items</span><span class="p">[</span><span class="n">index</span><span class="p">]</span>
  <span class="p">}</span>

<span class="p">}</span>
</code></pre>

<p>• Make your view controller conformant to <code>UICollectionViewDatasource</code>:</p>
<pre class="highlight swift"><code><span class="kd">extension</span> <span class="kt">ViewController</span><span class="p">:</span> <span class="kt">UICollectionViewDatasource</span> <span class="p">{</span>

  <span class="kd">func</span> <span class="nf">collectionView</span><span class="p">(</span><span class="n">_</span> <span class="nv">collectionView</span><span class="p">:</span> <span class="kt">UICollectionView</span><span class="p">,</span> <span class="n">numberOfItemsInSection</span> <span class="nv">section</span><span class="p">:</span> <span class="kt">Int</span><span class="p">)</span> <span class="o">-&gt;</span> <span class="kt">Int</span> <span class="p">{</span>
    <span class="k">let</span> <span class="nv">section</span> <span class="o">=</span> <span class="n">glidingView</span><span class="o">.</span><span class="n">expandedItemIndex</span> <span class="c1">// Value of expanded section.</span>
    <span class="k">return</span> <span class="n">images</span><span class="p">[</span><span class="n">section</span><span class="p">]</span><span class="o">.</span><span class="n">count</span>
  <span class="p">}</span>

  <span class="kd">func</span> <span class="nf">collectionView</span><span class="p">(</span><span class="n">_</span> <span class="nv">collectionView</span><span class="p">:</span> <span class="kt">UICollectionView</span><span class="p">,</span> <span class="n">cellForItemAt</span> <span class="nv">indexPath</span><span class="p">:</span> <span class="kt">IndexPath</span><span class="p">)</span> <span class="o">-&gt;</span> <span class="kt">UICollectionViewCell</span> <span class="p">{</span>
    <span class="k">guard</span> <span class="k">let</span> <span class="nv">cell</span> <span class="o">=</span> <span class="n">collectionView</span><span class="o">.</span><span class="nf">dequeueReusableCell</span><span class="p">(</span><span class="nv">withReuseIdentifier</span><span class="p">:</span> <span class="s">"Cell"</span><span class="p">,</span> <span class="nv">for</span><span class="p">:</span> <span class="n">indexPath</span><span class="p">)</span> <span class="k">as?</span> <span class="kt">CollectionCell</span> <span class="k">else</span> <span class="p">{</span> <span class="k">return</span> <span class="kt">UICollectionViewCell</span><span class="p">()</span> <span class="p">}</span>
    <span class="c1">// Configure and return your cell.</span>
    <span class="k">return</span> <span class="n">cell</span>
  <span class="p">}</span>

<span class="p">}</span>
</code></pre>
<a href='#customize' class='anchor' aria-hidden=true><span class="header-anchor"></span></a><h2 id='customize'>Customize</h2>

<p>You can customize appearance of <code>GlidingCollection</code> by overriding <code>GlidingConfig</code>&rsquo;s <code>shared</code> instance with your own one.</p>
<pre class="highlight swift"><code><span class="k">var</span> <span class="nv">config</span> <span class="o">=</span> <span class="kt">GlidingConfig</span><span class="o">.</span><span class="n">shared</span>
<span class="n">config</span><span class="o">.</span><span class="n">buttonsFont</span> <span class="o">=</span> <span class="kt">UIFont</span><span class="o">.</span><span class="nf">boldSystemFont</span><span class="p">(</span><span class="nv">ofSize</span><span class="p">:</span> <span class="mi">22</span><span class="p">)</span>
<span class="n">config</span><span class="o">.</span><span class="n">activeButtonColor</span> <span class="o">=</span> <span class="o">.</span><span class="n">black</span>
<span class="n">config</span><span class="o">.</span><span class="n">inactiveButtonsColor</span> <span class="o">=</span> <span class="o">.</span><span class="n">lightGray</span>
<span class="kt">GlidingConfig</span><span class="o">.</span><span class="n">shared</span> <span class="o">=</span> <span class="n">config</span>
</code></pre>

<blockquote>
<p>🗒 All parameters with their descriptions listed in <a href="/GlidingCollection/GlidingConfig.swift"><code>GlidingConfig</code></a> file.</p>
</blockquote>

<p><br></p>
<a href='#notes' class='anchor' aria-hidden=true><span class="header-anchor"></span></a><h2 id='notes'>Notes</h2>

<p>There are <a href="/GlidingCollection/Protocols/GlidingCollectionDelegate.swift"><code>GlidingCollectionDelegate</code></a> protocol which can you notify when <em>item</em> in <code>GlidingCollection</code> <code>didSelect</code>, <code>willExpand</code> and <code>didExpand</code>.</p>

<p>If you want to achieve parallax effect on horizontal cards stack, you need to place your <code>parallax view</code> in cell&rsquo;s <code>contentView</code> and set it&rsquo;s <code>tag</code> to <code>99</code>.</p>

<p><img src="/assets/parallax-view.png" alt="parallax-view"></p>

<p>There is <code>kGlidingCollectionParallaxViewTag</code> constant if you layout a cell in code.
<code>swift
imageView.tag = kGlidingCollectionParallaxViewTag
</code></p>

<p><br></p>
<a href='#license' class='anchor' aria-hidden=true><span class="header-anchor"></span></a><h2 id='license'>License</h2>

<p>GlidingCollection is released under the MIT license.
See <a href="./LICENSE">LICENSE</a> for details.</p>

<p><br></p>
<a href='#follow-us' class='anchor' aria-hidden=true><span class="header-anchor"></span></a><h2 id='follow-us'>Follow us</h2>

<p><a href="https://twitter.com/intent/tweet?text=https://github.com/ramotion/gliding-collection"><img src="https://img.shields.io/twitter/url/http/shields.io.svg?style=social" alt="Twitter URL"></a>
<a href="https://twitter.com/ramotion"><img src="https://img.shields.io/twitter/follow/ramotion.svg?style=social" alt="Twitter Follow"></a></p>

          </section>
        </section>
        <section id="footer">
          <p>&copy; 2017 <a class="link" href="https://github.com/Ramotion/gliding-collection" target="_blank" rel="external">Abdurahim Jauzee</a>. All rights reserved. (Last updated: 2017-03-30)</p>
          <p>Generated by <a class="link" href="https://github.com/realm/jazzy" target="_blank" rel="external">jazzy ♪♫ v0.7.4</a>, a <a class="link" href="http://realm.io" target="_blank" rel="external">Realm</a> project.</p>
        </section>
      </article>
    </div>
  </body>
</div>
</html>
